<template>

  <el-tooltip ref="tooltipRef"
              placement="right-end"
              :offset="-1170"
              effect="light"
              :show-after="100"
              :auto-close="500"
              v-model:visible="tooltipVisible"
              :popper-options="{
      modifiers: [
        {
          name: 'computeStyles',
          options: {
            adaptive: false,
            enabled: false,
          },
        },
      ],
    }"

              :virtual-ref="buttonRef"
              virtual-triggering
              popper-class="singleton-tooltip">

    <template #content>
      <span>
            {{ toolTipContent }}
      </span>

    </template>
  </el-tooltip>

  <el-card class="result-card" shadow="always">
    <template #header>
      <div class="card-header">
        <el-button size="small" class="return-button" @click.stop="closeCard">
          <el-icon>
            <Close/>
          </el-icon>
        </el-button>
      </div>
    </template>
    <div v-if="!isEmpty">
      <el-card class="search-result-card" @dblclick="handleDbClick(link)" v-for="link of links" :key="link.id"
               @mouseover="showToolTip($event,link.cType)"
               shadow="hover">
        <el-space wrap :class="link.cType === 'folder' ? 'prefix-icon folder-icon-wrap' : 'prefix-icon'">
          <component :is="fileType(link.cType)"></component>
        </el-space>
        <div class="search-card-result-name" v-if="currentLevel===1" v-html="hightLightValue(link.name,keyWord)"></div>
        <div class="search-card-result-name" v-if="currentLevel!==1">{{ link.name }}</div>
        <div class="search-card-result-path" v-if="link.name!=='上级目录'" style="margin-left: 35rem">
          <el-tag class="search-result-tag1" effect="dark">{{ typeSelect[link.type - 1].label }}</el-tag>
          <el-tag class="search-result-tag2" round effect="dark">{{ link.ancestorsName || '根目录' }}</el-tag>
        </div>
        <div class="search-card-result-author" v-if="link.name!=='上级目录'">作者： {{ link.createBy }}</div>
        <div class="search-card-result-time" v-if="link.name!=='上级目录'">上传时间： {{ link.createTime }}</div>
      </el-card>
    </div>
    <el-empty v-if="isEmpty" class="empty-image" description="查询结果为空"/>
  </el-card>
</template>

<script setup>
import {computed, ref, watch} from "vue";
import WordIcon from "@/components/document/WordIcon";
import PptIcon from "@/components/document/PptIcon";
import PdfIcon from "@/components/document/PdfIcon";
import ExcelIcon from "@/components/document/ExcelIcon";
import JpgIcon from "@/components/document/JpgIcon";
import XmindIcon from "@/components/document/XmindIcon";
import MdIcon from "@/components/document/MdIcon";
import TxtIcon from "@/components/document/TxtIcon";
import HexIcon from "@/components/document/HexIcon";
import Mp4Icon from "@/components/document/Mp4Icon";
import UnknownIcon from "@/components/document/UnknownIcon";
import FolderIcon from '@/components/document/FolderIcon.vue'
import router from "@/router";
import FrontApi from "@/api/front";

const props = defineProps({
  links: Array,
  typeSelect: Array,
  keyWord: String,
  isEmptyResult: Boolean
})

const emit = defineEmits(['closeCard'])
const isEmpty = ref(props.isEmptyResult)

const typeSelect = ref(props.typeSelect)
const firstLinks = ref(props.links)
const keyWord = ref(props.keyWord)

const tooltipVisible = ref(false)
const buttonRef = ref()
const toolTipContent = ref('双击查看文件')

watch(() => props.links, (newVal) => {
  links.value = newVal
  firstLinks.value = newVal
})

watch(() => props.keyWord, (newVal) => {
  keyWord.value = newVal
})

watch(() => props.isEmptyResult, (newVal) => {
  isEmpty.value = newVal
})

const closeCard = () => {
  emit('closeCard')
}

const showToolTip = (e, type) => {
  if (type !== "folder") {
    toolTipContent.value = "双击查看文件"
    buttonRef.value = e.currentTarget
  } else {
    toolTipContent.value = "双击进入文件夹"
    buttonRef.value = e.currentTarget
  }
}

const hightLightValue = (val, keyword) => {
  const Reg = new RegExp(keyword, 'i');
  if (val) {
    return val.replace(Reg, `<span style="color: #409EFF;font-weight: bold ">${keyword}</span>`);
  }
}

const links = ref(props.links)
const currentLevel = ref(1) //默认为第一层
const cache = [links.value] // 缓存数组，初始值为第一层

// 切换至上级目录
const switchToParent = () => {
  currentLevel.value--
  links.value = cache[currentLevel.value - 1]
  cache.length = currentLevel.value
  console.log(cache)
}

// 获取指定目录下的子目录和文件
const getChildren = (link) => {
  FrontApi.getSpaceDirectoryByParentId(link.id).then(res => {
    if (res.data.size !== 0) {
      const children = res.data.slice()
      children.unshift({
        name: '上级目录',
        cType: 'folder',
        type: link.type,
        ancestorsName: res.data[0].ancestorsName,
        id: link.parentId
      })
      links.value = children
      currentLevel.value++
      cache[currentLevel.value - 1] = children
      console.log(cache)
    }
  })
}

// 双击处理
const handleDbClick = (link) => {
  if (link.cType !== 'folder') {
    const to = router.resolve({name: 'DetailPreview', params: {docId: link.documentId, type: link.type}})
    window.open(to.href, "_blank")
  } else if (link.name === '上级目录') {
    switchToParent()
  } else {
    getChildren(link)
  }
}


const fileType = computed(() => {
  return (type) => {
    const typeMap = {
      'doc': WordIcon,
      'docx': WordIcon,
      'ppt': PptIcon,
      'pptx': PptIcon,
      'pdf': PdfIcon,
      'xls': ExcelIcon,
      'xlsx': ExcelIcon,
      'folder': FolderIcon,
      'jpg': JpgIcon,
      'png': JpgIcon,
      'jpeg': JpgIcon,
      'xmind': XmindIcon,
      'md': MdIcon,
      'txt': TxtIcon,
      'hex': HexIcon,
      'mp4': Mp4Icon
    }

    return typeMap[type.toLowerCase()] || UnknownIcon
  }
})


</script>

<style scoped lang="scss">

.search-result-tag1 {
  background: #aa6ae5;
  border: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.search-result-tag2 {
  border: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.search-result-card:not(:first-child) {
  margin-top: 1rem;
}

.search-result-card :deep(.el-card__body) {
  display: flex;
  align-items: center;
  padding: 1.5rem;
}

.search-result-card {
  border-radius: 1rem;
  box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

.result-card {
  display: flex;
  flex-direction: column;
  min-height: 60vh;

  :deep(.el-card__header) {
    position: fixed;
    margin-top: 0;
    font-size: 2rem;
    font-weight: 500;
    padding: 0.5rem;
    right: 3rem;
    background: var(--el-bg-color);
    z-index: 99;
    border: 1px solid var(--el-card-border-color);
  }

  .return-button {
    background: #f35757;
    color: white;
    border: 0;
    height: 3rem !important;
    width: 3rem !important;
  }

}

.search-card-result-name {
  font-size: 1.6rem;
  max-width: 40%;
  min-width: 19%;
}

.search-card-result-path {
  position: absolute;
  left: 18%;
}

.search-card-result-time {
  position: absolute;
  font-size: 1.6rem;
  right: 3%;
}

.search-card-result-author {
  position: absolute;
  font-size: 1.6rem;
  left: 67%;
}


.search-card-result-type {

}

.folder-icon-wrap {
  color: #fbc86a
}

.prefix-icon svg {
  width: 3rem !important;
  height: 3rem !important;
}

.card-header {

}

.empty-image {
  width: 65rem;
  position: absolute;
  left: 32%;
  top: 21%;
}
</style>
